<template>
  <view class="page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="handleBack">
      <uni-icons type="back" size="24" color="#333" />
    </view>

    <!-- 顶部导航 -->
    <view class="header">
      <text class="title">健康档案</text>
    </view>

    <!-- 主要内容区 -->
    <view class="content">
      <!-- 基本信息部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">基本信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">姓名</text>
            <text class="value">{{ userInfo.name }}</text>
          </view>
          <view class="info-item">
            <text class="label">性别</text>
            <text class="value">{{ userInfo.gender === 'female' ? '女' : '男' }}</text>
          </view>
          <view class="info-item">
            <text class="label">年龄</text>
            <text class="value">{{ userInfo.age }}岁</text>
          </view>
          <view class="info-item">
            <text class="label">身份证号</text>
            <text class="value">{{ userInfo.idCard }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系电话</text>
            <text class="value">{{ userInfo.phone }}</text>
          </view>
        </view>
      </view>

      <!-- 既往病史部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">既往病史</text>
        </view>
        <view class="history-list">
          <view class="history-item">
            <text class="year">2022年</text>
            <text class="disease">支气管炎</text>
          </view>
          <view class="history-item">
            <text class="year">2020年</text>
            <text class="disease">肺炎</text>
          </view>
          <view class="history-item">
            <text class="year">2018年</text>
            <text class="disease">骨折</text>
          </view>
        </view>
        <view 
          class="expand" 
          @click="toggleHistoryPopup"
        >
          <text class="expand-text">展开全部</text>
          <uni-icons 
            type="bottom" 
            size="14" 
            color="#666" 
          />
        </view>

        <!-- 病史详情弹窗 -->
        <uni-popup 
          ref="popup" 
          type="center" 
          :mask-click="true" 
          background-color="#fff"
        >
          <view class="history-popup">
            <view class="popup-header">
              <text class="popup-title">既往病史记录</text>
              <view 
                class="close-btn" 
                @click="toggleHistoryPopup"
              >
                <uni-icons 
                  type="close" 
                  size="20" 
                  color="#666" 
                />
              </view>
            </view>
            <scroll-view 
              scroll-y 
              class="history-popup-content"
            >
              <view 
                v-for="(item, index) in historyList"
                :key="index"
                class="history-item"
              >
                <text class="year">{{ item.year }}</text>
                <text class="disease">{{ item.disease }}</text>
              </view>
            </scroll-view>
          </view>
        </uni-popup>
      </view>

      <!-- 过敏记录部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">过敏记录</text>
        </view>
        <view class="allergy-list">
          <view 
            v-for="(item, index) in allergyList" 
            :key="index"
            class="allergy-item"
          >
            <uni-icons 
              type="info" 
              size="16" 
              color="#FF5151" 
            />
            <text class="allergy-text">{{ item }}</text>
          </view>
          <view 
            class="add-allergy" 
            @click="toggleAllergyPopup"
          >
            <uni-icons 
              type="plusempty" 
              size="16" 
              color="#2979FF" 
            />
            <text class="add-text">添加过敏记录</text>
          </view>
        </view>

        <!-- 添加过敏记录弹窗 -->
        <uni-popup 
          ref="allergyPopup" 
          type="center" 
          :mask-click="false" 
          background-color="#fff"
        >
          <view class="edit-popup">
            <view class="popup-header">
              <text class="popup-title">添加过敏记录</text>
              <view 
                class="close-btn" 
                @click="toggleAllergyPopup"
              >
                <uni-icons 
                  type="close" 
                  size="20" 
                  color="#666" 
                />
              </view>
            </view>
            <scroll-view 
              scroll-y 
              class="edit-popup-content"
            >
              <view class="edit-form">
                <view class="form-item">
                  <text class="form-label">过敏源</text>
                  <input 
                    type="text" 
                    class="form-input" 
                    v-model="allergyInput" 
                    placeholder="请输入过敏源"
                  />
                </view>
                <button 
                  class="submit-btn" 
                  @click="addAllergy"
                >添加</button>
              </view>
            </scroll-view>
          </view>
        </uni-popup>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <button 
        class="btn btn-outline" 
        @click="toggleEditPopup"
      >编辑资料</button>
      <button 
        class="btn btn-primary" 
        @click="toggleExportPopup"
      >导出记录</button>
    </view>

    <!-- 编辑资料弹窗 -->
    <uni-popup 
      ref="editPopup" 
      type="center" 
      :mask-click="false" 
      background-color="#fff"
    >
      <view class="edit-popup">
        <view class="popup-header">
          <text class="popup-title">编辑资料</text>
          <view 
            class="close-btn" 
            @click="toggleEditPopup"
          >
            <uni-icons 
              type="close" 
              size="20" 
              color="#666" 
            />
          </view>
        </view>
        <scroll-view 
          scroll-y 
          class="edit-popup-content"
        >
          <view class="edit-form">
            <view class="form-item">
              <text class="form-label">姓名</text>
              <input 
                type="text" 
                class="form-input" 
                v-model="editForm.name" 
              />
            </view>
            <view class="form-item">
              <text class="form-label">性别</text>
              <view class="radio-group">
                <label class="radio-item">
                  <radio 
                    value="female" 
                    :checked="editForm.gender === 'female'" 
                    @click="editForm.gender = 'female'" 
                    color="#2979FF" 
                  />
                  <text class="radio-text">女</text>
                </label>
                <label class="radio-item">
                  <radio 
                    value="male" 
                    :checked="editForm.gender === 'male'" 
                    @click="editForm.gender = 'male'" 
                    color="#2979FF" 
                  />
                  <text class="radio-text">男</text>
                </label>
              </view>
            </view>
            <view class="form-item">
              <text class="form-label">年龄</text>
              <input 
                type="number" 
                class="form-input" 
                v-model="editForm.age" 
              />
            </view>
            <view class="form-item">
              <text class="form-label">身份证号</text>
              <input 
                type="text" 
                class="form-input" 
                v-model="editForm.idCard" 
              />
            </view>
            <view class="form-item">
              <text class="form-label">联系电话</text>
              <input 
                type="number" 
                class="form-input" 
                v-model="editForm.phone" 
              />
            </view>
          </view>
          <button 
            class="submit-btn" 
            @click="saveUserInfo"
          >保存</button>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 导出预览弹窗 -->
    <uni-popup 
      ref="exportPopup" 
      type="center" 
      :mask-click="false" 
      background-color="#fff"
    >
      <view class="export-popup">
        <view class="popup-header">
          <text class="popup-title">导出预览</text>
          <view 
            class="close-btn" 
            @click="toggleExportPopup"
          >
            <uni-icons 
              type="close" 
              size="20" 
              color="#666" 
            />
          </view>
        </view>
        <scroll-view 
          scroll-y 
          class="export-popup-content"
        >
          <view class="export-section">
            <text class="export-section-title">基本信息</text>
            <view class="export-info-item">
              <text class="export-label">姓名：</text>
              <text class="export-value">{{ userInfo.name }}</text>
            </view>
            <view class="export-info-item">
              <text class="export-label">性别：</text>
              <text class="export-value">{{ userInfo.gender === 'female' ? '女' : '男' }}</text>
            </view>
            <view class="export-info-item">
              <text class="export-label">年龄：</text>
              <text class="export-value">{{ userInfo.age }}岁</text>
            </view>
            <view class="export-info-item">
              <text class="export-label">身份证号：</text>
              <text class="export-value">{{ userInfo.idCard }}</text>
            </view>
            <view class="export-info-item">
              <text class="export-label">联系电话：</text>
              <text class="export-value">{{ userInfo.phone }}</text>
            </view>
          </view>
          <view class="export-section">
            <text class="export-section-title">既往病史</text>
            <view 
              v-for="(item, index) in historyList" 
              :key="index"
              class="export-history-item"
            >
              <text class="export-year">{{ item.year }}：</text>
              <text class="export-disease">{{ item.disease }}</text>
            </view>
          </view>
          <view class="export-section">
            <text class="export-section-title">过敏记录</text>
            <view 
              v-for="(item, index) in allergyList" 
              :key="index"
              class="export-allergy-item"
            >
              <text class="export-allergy">{{ item }}</text>
            </view>
          </view>
          <view class="export-time">
            <text class="export-time-text">导出时间：{{ currentTime }}</text>
          </view>
        </scroll-view>
        <view class="export-actions">
          <button 
            class="export-btn btn-outline" 
            @click="toggleExportPopup"
          >取消</button>
          <button 
            class="export-btn btn-primary" 
            @click="handleExport"
          >确认导出</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

// 弹窗组件引用
const popup = ref()
const allergyPopup = ref()
const editPopup = ref()
const exportPopup = ref()

// 弹窗显示状态
const showHistoryPopup = ref(false)
const showEditPopup = ref(false)
const showAllergyPopup = ref(false)
const showExportPopup = ref(false)

// 表单数据
const allergyInput = ref('')
const userInfo = ref({
  name: '李梅',
  gender: 'female',
  age: '35',
  idCard: '310101198****1234',
  phone: '138****5678'
})
const editForm = ref({ ...userInfo.value })

// 静态数据
const historyList = [
  { year: '2022年', disease: '支气管炎' },
  { year: '2020年', disease: '肺炎' },
  { year: '2018年', disease: '骨折' },
  { year: '2017年', disease: '感冒' },
  { year: '2016年', disease: '扁桃体炎' },
  { year: '2015年', disease: '支气管哮喘' }
]
const allergyList = ref<string[]>(['青霉素类药物', '海鲜'])
const currentTime = new Date().toLocaleString()

// 病史弹窗相关方法
const toggleHistoryPopup = () => {
  if (showHistoryPopup.value) {
    popup.value.close()
  } else {
    popup.value.open()
  }
  showHistoryPopup.value = !showHistoryPopup.value
}

// 编辑资料相关方法
const toggleEditPopup = () => {
  if (showEditPopup.value) {
    editPopup.value.close()
  } else {
    editForm.value = { ...userInfo.value }
    editPopup.value.open()
  }
  showEditPopup.value = !showEditPopup.value
}

const saveUserInfo = () => {
  Object.assign(userInfo.value, editForm.value)
  toggleEditPopup()
  uni.showToast({
    title: '保存成功',
    icon: 'success',
    duration: 2000
  })
}

// 过敏记录相关方法
const toggleAllergyPopup = () => {
  if (showAllergyPopup.value) {
    allergyPopup.value.close()
    allergyInput.value = ''
  } else {
    allergyPopup.value.open()
  }
  showAllergyPopup.value = !showAllergyPopup.value
}

const addAllergy = () => {
  if (allergyInput.value.trim()) {
    allergyList.value.push(allergyInput.value.trim())
    toggleAllergyPopup()
    uni.showToast({
      title: '添加成功',
      icon: 'success',
      duration: 2000
    })
  }
}

// 导出相关方法
const toggleExportPopup = () => {
  if (showExportPopup.value) {
    exportPopup.value.close()
  } else {
    exportPopup.value.open()
  }
  showExportPopup.value = !showExportPopup.value
}

const handleExport = () => {
  toggleExportPopup()
  uni.showToast({
    title: '导出成功',
    icon: 'success',
    duration: 2000
  })
}

// 返回上一页
const handleBack = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>
<style>
/* 返回按钮样式 */
.back-btn {
  position: fixed;
  top: 60rpx;
  left: 30rpx;
  z-index: 1002;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-btn:active {
  transform: scale(0.95);
}

/* 页面基础样式 */
page {
  height: 100%;
  background-color: #f5f5f5;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding-top: 120rpx;  /* 减小顶部padding，只为返回按钮留空间 */
}

/* 顶部导航栏 */
.header {
  background: #fff;
  padding: 30rpx 0;
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

/* 主要内容区域 */
.content {
  flex: 1;
  padding: 24rpx;
}

/* 通用卡片样式 */
.section {
  margin-bottom: 24rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-header {
  margin-bottom: 24rpx;
}

.section-title {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-left: 24rpx;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background-color: #2979FF;
  border-radius: 6rpx;
}

/* 基本信息列表 */
.info-list {
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
  padding-bottom: 28rpx;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-item .label {
  width: 140rpx;
  font-size: 14px;
  color: #666;
}

.info-item .value {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 病史列表 */
.history-list {
  margin-bottom: 20rpx;
}

.history-item {
  display: flex;
  margin-bottom: 20rpx;
}

.history-item .year {
  width: 120rpx;
  font-size: 14px;
  color: #999;
}

.history-item .disease {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.expand .expand-text {
  font-size: 14px;
  color: #666;
  margin-right: 8rpx;
}

/* 过敏记录列表 */
.allergy-list {
  background-color: rgba(255, 81, 81, 0.05);
  border-radius: 16rpx;
  padding: 24rpx;
}

.allergy-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.allergy-text {
  margin-left: 12rpx;
  font-size: 14px;
  color: #333;
}

.add-allergy {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
}

.add-text {
  margin-left: 12rpx;
  font-size: 14px;
  color: #2979FF;
}

/* 底部操作栏 */
.footer {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
}

/* 按钮样式 */
.btn {
  width: 320rpx;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn-outline {
  color: #2979FF;
  border: 1px solid #2979FF;
  background-color: #fff;
}

.btn-primary {
  color: #fff;
  background-color: #2979FF;
}

/* 弹窗样式 */
.history-popup {
  padding: 32rpx;
  width: 650rpx;
  height: 900rpx;
  display: flex;
  flex-direction: column;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.close-btn {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 病史弹窗内容 */
.history-popup-content {
  flex: 1;
  overflow: auto;
  padding: 0 20rpx;
}

.history-popup-content .history-item {
  padding: 32rpx 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.history-popup-content .history-item:last-child {
  border-bottom: none;
}

/* 编辑弹窗 */
.edit-popup {
  padding: 32rpx;
  width: 650rpx;
  height: 900rpx;
  display: flex;
  flex-direction: column;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.edit-popup-content {
  flex: 1;
  overflow: auto;
  padding: 0 20rpx;
}

.edit-form {
  padding: 20rpx 0;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333;
}

.radio-group {
  display: flex;
  gap: 32rpx;
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-text {
  margin-left: 8rpx;
  font-size: 14px;
  color: #333;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #2979FF;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}

.submit-btn:active {
  opacity: 0.8;
}

/* 导出预览弹窗 */
.export-popup {
  padding: 32rpx;
  width: 650rpx;
  height: 900rpx;
  display: flex;
  flex-direction: column;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.export-popup-content {
  flex: 1;
  overflow: auto;
  padding: 0 20rpx;
}

.export-section {
  margin-bottom: 40rpx;
}

.export-section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24rpx;
}

.export-info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.export-label {
  width: 140rpx;
  font-size: 14px;
  color: #666;
}

.export-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.export-history-item {
  display: flex;
  margin-bottom: 16rpx;
}

.export-year {
  width: 120rpx;
  font-size: 14px;
  color: #999;
}

.export-disease {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.export-allergy-item {
  margin-bottom: 16rpx;
}

.export-allergy {
  font-size: 14px;
  color: #333;
}

.export-time {
  margin-top: 40rpx;
  padding-top: 24rpx;
  border-top: 1px solid #f5f5f5;
}

.export-time-text {
  font-size: 14px;
  color: #999;
}

.export-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.export-btn {
  width: 280rpx;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.export-btn:active {
  opacity: 0.8;
}
</style>
